import React, { useState, useEffect } from 'react';
import { Column, Pie } from '@ant-design/charts';
import { Row, Col } from 'antd';

// 定义数据的类型
interface DataItem {
  type: string;
  value: number;
}

const DemoCharts: React.FC = () => {
  const [pieData, setPieData] = useState<DataItem[]>([]); // 声明 Pie 图的数据类型
  const [columnData, setColumnData] = useState<DataItem[]>([]); // 声明 Column 图的数据类型

  // 初始化数据
  useEffect(() => {
    setTimeout(() => {
      // 设置 Pie 图数据
      setPieData([
        { type: '男性员工', value: 30 },
        { type: '女性员工', value: 25 },
        // { type: '分类三', value: 18 },
        // { type: '分类四', value: 15 },
        // { type: '分类五', value: 10 },
        // { type: '其他', value: 5 },
      ]);

      // 设置 Column 图数据
      setColumnData([
        { type: '班主任', value: 12 },
        { type: '讲师', value: 20 },
        { type: '教研主管', value: 2 },
        { type: '学工主管', value: 3 },
        // { type: '1-3分', value: 0.22 },
        // { type: '3-10分', value: 0.05 },
        // { type: '10-30分', value: 0.01 },
        // { type: '30+分', value: 0.015 },
      ]);
    }, 1000);
  }, []);

  // 饼图配置
  const pieConfig = {
    title: '员工性别统计',
    data: pieData,
    angleField: 'value',
    colorField: 'type',
    label: {
      text: 'value',
      style: {
        fontWeight: 'bold',
      },
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
  };

  // 柱状图配置
  const columnConfig = {
    title: '员工职位统计',
    data: columnData,
    xField: 'type',  // x轴字段
    yField: 'value', // y轴字段
    style: {
      fill: ({ type }: { type: string }) => {
        // 根据 type 字段设置不同颜色
        if (type === '班主任' || type === '教研主管') {
          return '#22CBCC';
        }
        return '#2989FF';
      },
    },
    label: {
      text: (originData: { value: number }) => {
        const val = parseFloat(originData.value.toString());
        if (val < 0.05) {
          return (val * 100).toFixed(1) + '%';
        }
        return '';
      },
      offset: 10,
    },
    legend: false,  // 隐藏图例
  };

  return (
    <Row gutter={16}>
      {/* 左侧饼图 */}
      <Col span={12}>
        <Pie {...pieConfig} />
      </Col>

      {/* 右侧柱状图 */}
      <Col span={12}>
        <Column {...columnConfig} />
      </Col>
    </Row>
  );
};

export default DemoCharts;
